<template>
  <div class="registration-form">
    <!-- 活动信息卡片 -->
    <div class="event-info">
      <div class="event-title">
        <img src="/images/arrow-left.png" class="title-icon">
        百葫雅韵 · 葫芦工艺大赛
      </div>
      <div class="event-rules">
        <div class="rule-item">以手机号为标识，每户仅限报名一次;不可重复报名</div>
        <div class="rule-item">报名成功后，系统会为每个业户分配一个编号</div>
        <div class="rule-item">现场根据编号安排展位</div>
      </div>
    </div>

    <!-- 表单区域 -->
    <div class="form-container">
      <van-form @submit="handleSubmit">
        <!-- 姓名 -->
        <van-field
          v-model="formData.name"
          name="name"
          label="姓名"
          placeholder="请输入"
          :rules="[{ required: true, message: '请填写姓名' }]"
          required
        />

        <!-- 公司名称 -->
        <van-field
          v-model="formData.company"
          name="company"
          label="公司名称"
          placeholder="请输入"
        />

        <!-- 身份证号 -->
        <van-field
          v-model="formData.idCard"
          name="idCard"
          label="身份证号"
          placeholder="请输入"
        />

        <!-- 手机号 -->
        <van-field
          v-model="formData.phone"
          name="phone"
          label="手机号"
          placeholder="请输入"
          type="tel"
          :rules="[
            { required: true, message: '请填写手机号' },
            { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }
          ]"
          required
        />

        <!-- 是否非遗传承人 -->
        <van-field name="isHeritage" label="是否非遗传承人" required>
          <template #input>
            <van-radio-group v-model="formData.isHeritage" direction="horizontal">
              <van-radio name="yes">是</van-radio>
              <van-radio name="no">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <!-- 省份 -->
        <van-field
          v-model="formData.province"
          name="province"
          label="省"
          placeholder="请输入"
          readonly
          is-link
          :rules="[{ required: true, message: '请选择省份' }]"
          required
          @click="showProvincePicker = true"
        />

        <!-- 城市 -->
        <van-field
          v-model="formData.city"
          name="city"
          label="市"
          placeholder="请输入"
          readonly
          is-link
          :rules="[{ required: true, message: '请选择城市' }]"
          required
          @click="showCityPicker = true"
        />

        <!-- 地址 -->
        <van-field
          v-model="formData.address"
          name="address"
          label="地址"
          placeholder="请输入"
          :rules="[{ required: true, message: '请填写地址' }]"
          required
        />

        <!-- 作品名称 -->
        <van-field
          v-model="formData.workName"
          name="workName"
          label="作品名称"
          placeholder="请输入"
          :rules="[{ required: true, message: '请填写作品名称' }]"
          required
        />

        <!-- 作品图片 -->
        <van-field
          class="upload-field"
          name="workImages"
          label="作品图片"
          required>
          <template #input>
            <van-uploader
              v-model="fileList"
              multiple
              :max-count="6"
              :after-read="afterRead"
              upload-text="上传图片"
            >
              <div class="upload-button">
                <div class="upload-button-inner">
                  <div class="corner corner-top-left"/>
                  <div class="corner corner-top-right"/>
                  <div class="corner corner-bottom-left"/>
                  <div class="corner corner-bottom-right"/>
                  <img src="/images/upload-photo.png" class="upload-icon">
                </div>
              </div>
            </van-uploader>
            <div class="upload-tip">
              请提供三张以上作品照片,包括作品包装、作品全景及侧面等多角度照片,照片背景为纯色。
            </div>
          </template>

        </van-field>

        <!-- <div class="upload-tip">
          请提供三张以上作品照片,包括作品包装、作品全景及侧面等多角度照片,照片背景为纯色。
        </div> -->
        <!-- 作品简介 -->
        <van-field
          v-model="formData.workIntro"
          name="workIntro"
          label="作品简介"
          type="textarea"
          placeholder="系列作品分别注明尺寸、材质及创意等。"
          :rules="[{ required: true, message: '请填写作品简介' }]"
          required
          autosize
        />

        <!-- 作品规格 -->
        <van-field
          v-model="formData.workSpecs"
          name="workSpecs"
          label="作品规格、重量、材质、工艺"
          type="textarea"
          placeholder="规格：长、宽、高；单位：cm； 重量单位：kg"
          autosize
        />

        <div class="submit-btn"> 提交</div>
      </van-form>

    </div>

    <!-- 省份选择器 -->
    <van-popup v-model:show="showProvincePicker" position="bottom">
      <van-picker
        :columns="provinceColumns"
        @confirm="onProvinceConfirm"
        @cancel="showProvincePicker = false"
      />
    </van-popup>

    <!-- 城市选择器 -->
    <van-popup v-model:show="showCityPicker" position="bottom">
      <van-picker
        :columns="cityColumns"
        @confirm="onCityConfirm"
        @cancel="showCityPicker = false"
      />
    </van-popup>
  </div>
</template>

<script setup>
import { ref  } from 'vue'
import {  useRouter } from 'vue-router'
import { showToast } from 'vant'

const router = useRouter()

// 表单数据
const formData = ref({
  name: '',
  company: '',
  idCard: '',
  phone: '',
  isHeritage: 'no',
  province: '',
  city: '',
  address: '',
  workName: '',
  workIntro: '',
  workSpecs: ''
})

// 文件上传相关
const fileList = ref([])
const isSubmitting = ref(false)

// 省市区选择器
const showProvincePicker = ref(false)
const showCityPicker = ref(false)

// 省份数据
const provinceColumns = ref([
  { text: '北京市', value: 'beijing' },
  { text: '上海市', value: 'shanghai' },
  { text: '广东省', value: 'guangdong' },
  { text: '江苏省', value: 'jiangsu' },
  { text: '浙江省', value: 'zhejiang' },
  { text: '山东省', value: 'shandong' },
  { text: '河南省', value: 'henan' },
  { text: '四川省', value: 'sichuan' },
  { text: '湖北省', value: 'hubei' },
  { text: '湖南省', value: 'hunan' },
  { text: '河北省', value: 'hebei' },
  { text: '福建省', value: 'fujian' },
  { text: '安徽省', value: 'anhui' },
  { text: '辽宁省', value: 'liaoning' },
  { text: '江西省', value: 'jiangxi' },
  { text: '陕西省', value: 'shaanxi' },
  { text: '山西省', value: 'shanxi' },
  { text: '黑龙江省', value: 'heilongjiang' },
  { text: '吉林省', value: 'jilin' },
  { text: '甘肃省', value: 'gansu' },
  { text: '青海省', value: 'qinghai' },
  { text: '云南省', value: 'yunnan' },
  { text: '贵州省', value: 'guizhou' },
  { text: '海南省', value: 'hainan' },
  { text: '台湾省', value: 'taiwan' },
  { text: '内蒙古自治区', value: 'neimenggu' },
  { text: '新疆维吾尔自治区', value: 'xinjiang' },
  { text: '西藏自治区', value: 'xizang' },
  { text: '宁夏回族自治区', value: 'ningxia' },
  { text: '广西壮族自治区', value: 'guangxi' },
  { text: '香港特别行政区', value: 'hongkong' },
  { text: '澳门特别行政区', value: 'macao' }
])

// 城市数据（示例数据，实际项目中应该根据省份动态加载）
const cityColumns = ref([
  { text: '北京市', value: 'beijing' },
  { text: '上海市', value: 'shanghai' },
  { text: '广州市', value: 'guangzhou' },
  { text: '深圳市', value: 'shenzhen' },
  { text: '杭州市', value: 'hangzhou' },
  { text: '南京市', value: 'nanjing' },
  { text: '苏州市', value: 'suzhou' },
  { text: '成都市', value: 'chengdu' },
  { text: '武汉市', value: 'wuhan' },
  { text: '西安市', value: 'xian' }
])

// 省份选择确认
const onProvinceConfirm = ({ selectedOptions }) => {
  formData.value.province = selectedOptions[0].text
  showProvincePicker.value = false
  // 清空城市选择
  formData.value.city = ''
}

// 城市选择确认
const onCityConfirm = ({ selectedOptions }) => {
  formData.value.city = selectedOptions[0].text
  showCityPicker.value = false
}

// 文件上传后处理
const afterRead = (file) => {
  console.log('文件上传:', file)
  // 这里可以添加文件上传到服务器的逻辑
}


// 表单提交
const handleSubmit = async () => {
  // 检查是否上传了至少3张图片
  if (fileList.value.length < 3) {
    showToast('请至少上传3张作品照片')
    return
  }

  isSubmitting.value = true

  try {
    // 模拟提交过程
    await new Promise(resolve => {
      setTimeout(resolve, 2000)
    })

    console.log('报名信息:', {
      ...formData.value,
      files: fileList.value.map(file => file.name || file.file?.name)
    })

    showToast.success('报名成功！我们会尽快与您联系。')

    // 跳转回首页
    router.push('/')
  } catch (error) {
    console.error('提交失败:', error)
    showToast.fail('提交失败，请重试。')
  } finally {
    isSubmitting.value = false
  }
}
</script>

<style lang="less" scoped>
// 定义变量
@primary-green: #005918;
@light-green: #a8d5a8;
@white: #ffffff;
@text-dark: #2c3e50;
@text-gray: #7D7B7B;
@border-color: #e0e0e0;
@error-color: #ff4757;
@success-color: #2ed573;

.registration-form {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #FCF1D5;
  overflow: hidden;
}

// 活动信息卡片
.event-info {
  flex: 0;
  padding: 1rem 1.2rem 0.5rem;
  background-color: #FCF1D5;
  .event-title{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: @primary-green;
    font-size: 1.2rem;
    margin-bottom: 0.7rem;
  }
  .title-icon{
    width: 1.2rem;
  }
  .event-rules{
    padding-left: 1.8rem;
  }
   .rule-item{
     font-size: 0.8rem;
     color: @text-gray;
     line-height: 1.5;
     margin-bottom: 4px;
     display: flex;
     align-items: center;
     &:last-child {
       margin-bottom: 0;
     }
     &::before{
       content: '';
       display: inline-block;
       width: 10px;
       height: 10px;
       border: 1px solid @primary-green;
       border-radius: 50%;
       margin-right: 0.5rem;
       flex-shrink: 0;
     }
   }
}

// 表单容器
.form-container {
  flex: 1;
  margin: 0;
  overflow: auto;
  .submit-btn{
    width: 70%;
    height: 70px;
    line-height: 70px;

    background-color: @primary-green;
    color: @white;
    font-size: 30px;
    font-weight: 600;
    text-align: center;
    border-radius: 10px;
    margin: 1rem auto;
  }

  :deep(.van-form) {
    margin: 0 0.8rem;
    margin-bottom: 1rem;
    background: @white;
    border-radius: 0.5rem;
    overflow: hidden;
  }
  .upload-field{
    :deep(.van-field__control){
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 10px;
      color: #cdcdcf;
      font-size: 28px;
      line-height: 40px;
    }
    .upload-button{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 150px;
      height: 100px;
      border-radius: 5px;
      border: 1px solid #86c2fe;
    }
     .upload-button-inner{
       width: 130px;
       height: 80px;
       display: flex;
       align-items: center;
       justify-content: center;
       position: relative;
     }
     .corner{
       position: absolute;
       width: 20px;
       height: 20px;
     }
     .corner-top-left{
      border-top: 1px solid #86c2fe;
      border-left: 1px solid #86c2fe;
       top: 0;
       left: 0;
     }
     .corner-top-right{
      border-top: 1px solid #86c2fe;
      border-right: 1px solid #86c2fe;
       top: 0;
       right: 0;
     }
     .corner-bottom-left{
      border-bottom: 1px solid #86c2fe;
      border-left: 1px solid #86c2fe;
       bottom: 0;
       left: 0;
     }
     .corner-bottom-right{
      border-bottom: 1px solid #86c2fe;
      border-right: 1px solid #86c2fe;
       bottom: 0;
       right: 0;
     }
    .upload-icon{
      width: 50px;
      height: 50px;
    }
  }
}
</style>
